<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>地址管理</title>

    <link href="${url}/static/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <!--		<link href="${url}/static/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">-->

    <link href="${url}/static/css/personal.css" rel="stylesheet" type="text/css">
    <link href="${url}/static/css/addstyle.css" rel="stylesheet" type="text/css">
    <script src="${url}/static/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="${url}/static/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
    <script src="${url}/static/js/infos.js"></script>

</head>

<body>
<!--头 -->
<!--		<header>-->
<!--			<article>-->
<!--				<div class="mt-logo">-->
<!--					&lt;!&ndash;顶部导航条 &ndash;&gt;-->
<!--					<div class="am-container header">-->
<!--						<ul class="message-l">-->
<!--							<div class="topMessage">-->
<!--								<div class="menu-hd">-->
<!--									<a href="#" target="_top" class="h">亲，请登录</a>-->
<!--									<a href="#" target="_top">免费注册</a>-->
<!--								</div>-->
<!--							</div>-->
<!--						</ul>-->
<!--						<ul class="message-r">-->
<!--							<div class="topMessage home">-->
<!--								<div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>-->
<!--							</div>-->
<!--							<div class="topMessage my-shangcheng">-->
<!--								<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>-->
<!--							</div>-->
<!--							<div class="topMessage mini-cart">-->
<!--								<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>-->
<!--							</div>-->
<!--							<div class="topMessage favorite">-->
<!--								<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>-->
<!--						</ul>-->
<!--						</div>-->

<!--						&lt;!&ndash;悬浮搜索框&ndash;&gt;-->

<!--						<div class="nav white">-->
<!--							<div class="logoBig">-->
<!--								<li><img src="../images/logobig.png" /></li>-->
<!--							</div>-->

<!--							<div class="search-bar pr">-->
<!--								<a name="index_none_header_sysc" href="#"></a>-->
<!--								<form>-->
<!--									<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">-->
<!--									<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">-->
<!--								</form>-->
<!--							</div>-->
<!--						</div>-->

<!--						<div class="clear"></div>-->
<!--					</div>-->
<!--				</div>-->
<!--			</article>-->
<!--		</header>-->

<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index"><a href="#">首页</a></li>
            <!--					<li class="qc"><a href="#">闪购</a></li>-->
            <!--					<li class="qc"><a href="#">限时抢</a></li>-->
            <!--					<li class="qc"><a href="#">团购</a></li>-->
            <!--					<li class="qc last"><a href="#">大包装</a></li>-->
        </ul>
        <!--				<div class="nav-extra">-->
        <!--					<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利-->
        <!--					<i class="am-icon-angle-right" style="padding-left: 10px;"></i>-->
        <!--				</div>-->
    </div>
</div>
<b class="line"></b>

<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> /
                        <small>Address&nbsp;list</small>
                    </div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">
                    <%for(item in list){%>
                    <li class="user-addresslist  ${item.opt == '1'?'defaultAddr':''}">
                        <input type="hidden" value="${item.id}"/>
                        <span class="new-option-r"><i class="am-icon-check-circle"></i>默认地址</span>
                        <p class="new-tit new-p-re">
                            <span class="new-txt">${item.name}</span>
                            <span class="new-txt-rd2">${item.tel}</span>
                        </p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province">${item.province}</span>
                                <span class="city">${item.city}</span>
                                <span class="dist">${item.area}</span>
                                <span class="street">${item.detail}</span></p>
                        </div>
                        <div class="new-addr-btn">
                            <a href="javascript:void(0);" onclick="delClick(${item.id});"><i class="am-icon-trash"></i>删除</a>
                        </div>
                    </li>
                    <%}%>
                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                    <div class="add-dress">

                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> /
                                <small>Add&nbsp;address</small>
                            </div>
                        </div>
                        <br/>

                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form class="am-form am-form-horizontal">

                                <div class="am-form-group">
                                    <label for="user-name" class="am-form-label">收货人&nbsp &nbsp</label>
                                    <div class="am-form-content">
                                        <input type="text" id="user-name" name="name" placeholder="收货人"/>
                                    </div>
                                </div>
                                <br/>
                                <div class="am-form-group">
                                    <label for="user-phone" class="am-form-label">手机号码&nbsp &nbsp</label>
                                    <div class="am-form-content">
                                        <input id="user-phone" name="tel" placeholder="手机号必填"/>
                                    </div>
                                </div>
                                <br/>
                                <div class="am-form-group">
                                    <label class="am-form-label">所在地&nbsp &nbsp &nbsp</label>
                                    <select name="province" id="province" onchange="getCity(this)">
                                        <option>请选择省份</option>
                                    </select>
                                    <select name="city" id="city" onchange="getArea(this)">
                                        <option value="">请选择城市</option>
                                    </select>
                                    <select name="area" id="area">
                                        <option value="">请选择区县</option>
                                    </select>
                                    <script>
                                        var pro = document.getElementById("province");

                                        function getPro() {
                                            for (var i = 0; i < infos.length; i++) {
                                                pro.innerHTML += "<option value='" + infos[i].code + "'>" + infos[i].name + "</option>";
                                            }
                                            ;
                                        };
                                        var cities = [];
                                        var city = document.getElementById("city");

                                        function getCity(t) {
                                            var proID = t.value;
                                            area.innerHTML = "<option>请选择县区</option>";
                                            city.innerHTML = "<option>请选择城市</option>";
                                            for (var i = 0; i < infos.length; i++) {
                                                if (proID == infos[i].code) {
                                                    cities = infos[i].city;
                                                    //遍历city
                                                    for (var j = 0; j < cities.length; j++) {
                                                        city.innerHTML += "<option value='" + cities[j].code + "'>" + cities[j].name + "</option>";
                                                    }
                                                    break;
                                                }
                                            }
                                            ;
                                        }

                                        var area = document.getElementById("area");

                                        function getArea(t) {
                                            var areaID = t.value;
                                            area.innerHTML = "<option>请选择县区</option>";
                                            for (var j = 0; j < cities.length; j++) {
                                                if (areaID == cities[j].code) {
                                                    for (var k = 0; k < cities[j].area.length; k++) {
                                                        area.innerHTML += "<option value='" + cities[j].area[k].code + "'>" + cities[j].area[k].name + "</option>";
                                                    }
                                                    break;
                                                }
                                            }
                                            ;
                                        }

                                        //页面加载完成
                                        window.onload = function () {
                                            getPro();
                                        };
                                    </script>
                                </div>
                                <br/>
                                <div class="am-form-group">
                                    <label for="detail" class="am-form-label">详细地址&nbsp &nbsp</label>
                                    <div class="am-form-content">
                                        <textarea class="" rows="3" id="detail" name="detail"
                                                  placeholder="输入详细地址"></textarea>
                                        <!--												<small>100字以内写出你的详细地址...</small>-->
                                    </div>
                                </div>

                                <!--										<div class="am-form-group">-->
                                <!--											<div class="am-u-sm-9 am-u-sm-push-3">-->
                                <!--												<a class="am-btn am-btn-danger">保存</a>-->
                                <!--												<a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>-->
                                <!--											</div>-->
                                <!--										</div>-->

                            </form>
                            <button id="sub" class="am-btn am-btn-danger" style="position: absolute; left: 50%;">保存
                            </button>
                        </div>

                    </div>

                </div>

            </div>

            <script type="text/javascript">
                $(document).ready(function () {
                    $(".new-option-r").click(function () {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                        let id = $(this).parent('.user-addresslist').find("input").val();
                        $.ajax({
                            url: '${url}' + '/user/address/edit',
                            type: 'post',
                            dataType: "json",
                            data: {
                                id: id
                            },
                            success: function (result) {

                            }
                        });
                    });

                    var $ww = $(window).width();
                    if ($ww > 640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }

                })
            </script>

            <div class="clear"></div>

        </div>
        <!--底部-->
        <div class="footer">
            <div class="footer-hd">
                <p>
                    <a href="${HOMEURL}"><em style="color: green">返回商城首页</em></a>
                </p>
            </div>

        </div>
    </div>

    <aside class="menu">
        <ul>
            <li class="person active">
                <a href="index.html"><i class="am-icon-user"></i>个人中心</a>
            </li>
            <li class="person">
                <p><i class="am-icon-newspaper-o"></i>个人资料</p>
                <ul>
                    <li><a href="${url}/user/info">个人信息</a></li>
                    <li class="active"><a href="#">地址管理</a></li>
                </ul>
            </li>
            <li class="person">
                <p><i class="am-icon-balance-scale"></i>我的交易</p>
                <ul>
                    <li><a href="${url}/user/getOrder">订单管理</a></li>
                </ul>
            </li>
            <!--					<li class="person">-->
            <!--						<p><i class="am-icon-dollar"></i>我的资产</p>-->
            <!--						<ul>-->
            <!--							<li> <a href="points.html">我的积分</a></li>-->
            <!--							<li> <a href="coupon.html">优惠券 </a></li>-->
            <!--							<li> <a href="bonus.html">红包</a></li>-->
            <!--							<li> <a href="walletlist.html">账户余额</a></li>-->
            <!--							<li> <a href="bill.html">账单明细</a></li>-->
            <!--						</ul>-->
            <!--					</li>-->

            <!--					<li class="person">-->
            <!--						<p><i class="am-icon-tags"></i>我的收藏</p>-->
            <!--						<ul>-->
            <!--							<li> <a href="collection.html">收藏</a></li>-->
            <!--							<li> <a href="foot.html">足迹</a></li>														-->
            <!--						</ul>-->
            <!--					</li>-->

            <!--					<li class="person">-->
            <!--						<p><i class="am-icon-qq"></i>在线客服</p>-->
            <!--						<ul>-->
            <!--							<li> <a href="consultation.html">商品咨询</a></li>-->
            <!--							<li> <a href="suggest.html">意见反馈</a></li>							-->
            <!--							-->
            <!--							<li> <a href="news.html">我的消息</a></li>-->
            <!--						</ul>-->
            <!--					</li>-->
        </ul>

    </aside>
</div>

</body>

</html>

<script>
    $("#sub").click(function () {
        sub();
    })

    function sub() {
        let name = $("input[name='name']").val();
        let tel = $("input[name='tel']").val();
        let province = $("#province option:checked").text();
        let city = $("#city option:checked").text();
        let area = $("#area option:checked").text();
        let detail = $("#detail").val();
        let province_val = $("#province option:checked").val();
        let city_val = $("#city option:checked").val();
        let area_val = $("#area option:checked").val();
        if (province_val == '' || city_val == '' || area_val == '' || name == '' || tel == '' || detail == '') {
            return;
        }
        $.ajax({
            url: '${url}' + '/user/address/add',
            type: 'post',
            dataType: "json",
            data: {
                name: name,
                tel: tel,
                province: province
                , city: city
                , area: area
                , detail: detail
            },
            success: function (result) {
                if (result.code == 200) {
                    window.location.href = "${url}/user/address";
                } else {
                    alert(result.msg)
                }
            }
        });
    }

    function delClick(id) {
        $.ajax({
            url: '${url}' + '/user/address/del',
            type: 'post',
            dataType: "json",
            data: {
                id: id
            },
            success: function (result) {
                if (result.code == 200) {
                    window.location.href = "${url}/user/address";
                } else {
                    alert(result.msg)
                }
            }
        });
    }
</script>